<template>
  <div>
    <h1>app.vue</h1>
    <!-- 如果有插槽，就要写成双标签 -->
    <my-checkbox>
      <b>篮球</b>
    </my-checkbox>

    <my-checkbox>
      <i>足球</i>
    </my-checkbox>

    <!-- 如果什么都没传，那么插槽的位置显示默认值 -->
    <my-checkbox></my-checkbox>

    <!-- 具名插槽的传递 -->
    <my-panel>
      <template v-slot:title>
        <h3>无题</h3>
      </template>

      <template v-slot:body>
        <div>
          <p>今天天气十分好</p>
          <p>利群来到桃花岛</p>
          <p>看到花姐在洗澡</p>
          <p>抓起衣服赶紧跑</p>
        </div>
      </template>
    </my-panel>

    <!-- 简写形式 -->
    <my-panel>
      <template #title>
        <h3>无题</h3>
      </template>

      <template #body>
        <div>
          <p>今天天气十分好</p>
          <p>利群来到桃花岛</p>
          <p>看到花姐在洗澡</p>
          <p>抓起衣服赶紧跑</p>
        </div>
      </template>
    </my-panel>

    <!-- 既传具名插槽，也传默认插槽 -->
    <my-panel>

      <!-- 默认插槽其实也有名字，只不过名字叫default -->
      <!-- <template>
        <div style="height: 1px; background-color:red;"></div>
      </template> -->
      <template #default>
        <div style="height: 1px; background-color:red;"></div>
      </template>

      <template #title="o">
        <h3>无题 -- {{ o.msg }} -- {{ o.count }}</h3>
      </template>

      <template #body>
        <div>
          <p>今天天气十分好</p>
          <p>利群来到桃花岛</p>
          <p>看到花姐在洗澡</p>
          <p>抓起衣服赶紧跑</p>
        </div>
      </template>
    </my-panel>

  </div>
</template>

<script>
import MyCheckbox from "./components/MyCheckbox.vue";
import MyPanel from "./components/MyPanel.vue";
export default {
  components: {
    MyCheckbox,
    MyPanel,
  },
};
</script>

<style>
</style>